<template>
  <div class="tableView_container">
    <div class="filter_box">
      <el-input v-model="querys.keyword" placeholder="请输入内容"></el-input>
      <el-select v-model="querys.selected" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <el-button @click="handleReset">reset</el-button>
      <el-button @click="handleSearch">search</el-button>
    </div>
    <app-table ref="tableEle" :fetchFn="fetchList">
      <el-table-column prop="title" label="title" width="180"> </el-table-column>
      <el-table-column prop="description" label="description" width="180"> </el-table-column>
      <el-table-column prop="author" label="author"> </el-table-column>
      <el-table-column label="img">
        <template #default="scope">
          <img style="width: 50px; height: 50px" :src="scope.row.img" alt="" />
        </template>
      </el-table-column>
    </app-table>
  </div>
</template>

<script>
import appTable from '@/components/app/app-table'
import { getTableList } from '@/api'
import { ref, reactive, onMounted } from 'vue'
export default {
  name: 'tableView',
  components: {
    appTable
  },
  setup(porps, context) {
    const tableEle = ref(null)
    const fetchList = (params) => {
      return getTableList({
        ...params,
        ...querys
      })
    }
    const handleReset = () => {
      querys.keyword = undefined
      querys.selected = undefined
      tableEle.value.fetchListTable(true)
    }
    onMounted(() => {
      console.log(tableEle.value)
    })

    const querys = reactive({
      keyword: '',
      selected: undefined
    })

    const handleSearch = () => {
      tableEle.value.fetchListTable(true)
    }
    return {
      fetchList,
      tableEle,
      handleReset,
      //
      handleSearch,
      querys,
      options: [
        {
          value: 1,
          label: '选项一'
        },
        {
          value: 2,
          label: '选项二'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
.filter_box {
  display: flex;
  align-items: center;
}
</style>
